<!-- 创建矿池 -->
<template>
  <div class="DeleteMenu">
    <el-dialog
      :visible="isRemoveDialogVisible"
      :close-on-click-modal="false"
      width="500px"
      :modal-append-to-body="false"
      :show-close="false"
    >
      <BaseDialogHead
        slot="title"
        title="删除确认"
        icon-class="shanchuqueren16px"
        @handleCloseDialog="handleCloseDialog"
      />

      <el-form
        ref="ruleForm"
        v-loading="loading"
        label-position="top"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="PersonalInfo__ruleForm"
      >
        <div class="tips-txt">
          请输入标题
          <span>{{ info.title }}</span> 确保您已了解操作所带来的风险
        </div>
        <el-form-item prop="user_name">
          <el-input v-model="ruleForm.user_name" class="input-width" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="footer">
        <el-button
          class="footer__btn"
          type="primary"
          plain
          round
          :loading="loading"
          @click="handleCloseDialog"
        >取消</el-button>
        <el-button
          class="footer__btn"
          type="primary"
          round
          :loading="loading"
          @click="submitDelete"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BaseDialogHead from '@/components/BaseDialogHead'
import { menu_delete } from '@/api/menu'
import { validateRemoveName } from '@/utils/validate'

export default {
  name: 'DeleteMenu',
  // import引入的组件需要注入到对象中才能使用
  components: {
    BaseDialogHead
  },
  props: {
    isRemoveDialogVisible: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    // 检测是输入正确
    var checkName = async(rule, value, callback) => {
      const validName = this.info.title
      validateRemoveName(value, validName, callback)
    }
    // 这里存放数据
    return {
      loading: false,
      ruleForm: {
        user_name: ''
      },
      rules: {
        user_name: [
          {
            required: true,
            message: '请输入用户名称进行确认',
            trigger: 'blur'
          },
          { validator: checkName, trigger: 'blur' }
        ]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - keep-alive
  async activated() {},
  // 方法集合
  methods: {
    submitDelete() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 移除接口
          this.handleDelete()
        } else {
          console.log('error submit!!')
          return
        }
      })
    },
    async handleDelete() {
      this.loading = true
      try {
        const id = this.info.id
        await menu_delete(id).then((res) => {
          if (res.code === 0) {
            this.$messageOnce({
              message: res.msg,
              type: 'success'
            })
            // 调用父组件方法更新 table
            this.$parent.getMenuList()
            this.handleCloseDialog()
          }
        })
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    handleCloseDialog() {
      this.$emit('InputRemoveClose')
      this.$refs.ruleForm.resetFields()
    }
  },
  // 进入页面前
  beforeRouteEnter(to, from, next) {
    next((vm) => {})
  },
  // 离开页面前
  beforeRouteLeave(to, from, next) {
    next()
  }
}
</script>
<style lang="scss" scoped>
.DeleteMenu {
  .tips-txt {
    font-size: 14px;
    font-weight: 400;
    color: #8c8c8c;
    line-height: 16px;
    margin-bottom: 20px;
    span {
      font-size: 14px;
      color: $MainColor;
      font-weight: bold;
    }
  }

  .footer {
    &__btn {
      // @include SecondButton();
      width: 77px;
      padding: 0;
      height: 28px;
    }
  }
}
::v-deep .el-dialog__body {
  padding: 30px 30px 0;
}
</style>
